import React, { useEffect, useRef } from 'react';
import { useScriptTag } from '@vueuse/core';
import styles from "./index.module.scss";

declare const BMap: any;

const BMapContainer: React.FC = () => {
    const mapContainer = useRef(null);
    let map: any = null;

    // 加载百度地图脚本
    const { load } = useScriptTag('https://api.map.baidu.com/getscript?v=3.0&ak=MwqQwPxa5ipusyNmH1WT62y5DKhYxIgb&services=&t=20220816154130');

    useEffect(() => {
        init();
    }, []);
    const init = async () => {
        if (!mapContainer.current) return
        await load();
        map = new BMap.Map(mapContainer.current);
        const point = new BMap.Point(116.403954, 39.915101);
        map.centerAndZoom(point, 16);
        map.enableScrollWheelZoom();
        var marker = new BMap.Marker(point);        // 创建标注   
        map.addOverlay(marker);
    }

    return (
        <div ref={mapContainer} 
        className={styles.container}></div>
    );
}

export default BMapContainer;